<template>
    <div>
        <van-sticky>
            <van-nav-bar title="手机充值" left-text="返回" left-arrow right-text="充值记录" @click-left="onClickLeft"
                @click-right="onClickRight" />
        </van-sticky>

        <div class="phone">
            <van-field v-model="tel" center clearable label="手机号" placeholder="请输入手机号">
                <template #button>
                    <van-button size="small" type="primary" @click="query">查询话费余额</van-button>
                </template>
            </van-field>
            <!-- 输入任意文本 -->
            <van-field v-model="Operator" label="运营商" placeholder="请输入运营商" />
            <!-- 允许输入数字，调起带符号的纯数字键盘 -->
            <van-field v-model="number" type="number" label="充值金额" placeholder="请输入充值金额" />
            <van-field v-model="paymentType" label="支付类型" placeholder="电子钱包,微信,支付宝" />
            <div class="top_up" @click="topUp">充值</div>
        </div>
    </div>
</template>
<script>
import nav from "@/mixin/nav";
import { phoneQuery, phonePay, phoneRecord } from "@/service/living/linvingService";
export default {
    mixins: [nav],
    data() {
        return {
            tel: "",
            number: "",
            Operator: "",
            paymentType: ""
        }
    },
    async created() {
        let { data } = await phoneRecord();
        console.log(data);
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {

        },
        async query() {
            let { data } = await phoneQuery({
                operator: this.Operator,
                phonenumber: this.tel,
            })
            console.log(data);
        },
        async topUp() {
            let { data } = await phonePay({
                paymentType: this.paymentType,
                phonenumber: this.tel,
                rechargeAmount: this.number,
                type: "1"
            })
            console.log(data);
        }
    }
}

</script>
<style scoped lang="scss">
.phone {
    padding: 10px;

    .top_up {
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #0297f4;
        margin-top: 30px;
        border-radius: 30px;
        color: #fff;
    }
}
</style>